<template>
	<div class="icons">
		<swiper :options="swiperOption"  >
			<swiper-slide v-for='(page,index) of pages'>
				<div class="icon" v-for="item of page">
					<div class="icon-img" >
					<img v-bind:src="item.imgUrl" class="icon-img-content">
					</div>
					<p class="title">{{item.desc}}</p>
				</div>
			</swiper-slide>
		</swiper>
	</div>
</template>
<script>
export default {
	name:'HomeIcons',
	props:{
		list:Array
	},
	data () {
		return {
			swiperOption:{
				autoplay:false
			}
		}
	},
	computed:{
		   pages () {
		      const pages = []
		      this.list.forEach((item, index) => {
		        const page = Math.floor(index / 8)
		        if (!pages[page]) {
		          pages[page] = []
		        }
		        pages[page].push(item)
		      })
		      return pages
    	}
	}
}
</script>
<style scoped>
	.icons >>> .swiper-container{
		height: 0;
		padding-bottom: 50%;
	}
	
	.icons{
		width: 100%;
		height: 0;
		padding-bottom:50%;
		overflow: hidden;
		margin-top: .1rem;
	}
	.icon{
		position: relative;
		overflow: hidden;
		float: left;
		width: 25%;
		height: 0;
		padding-bottom:25%;
		background: #fff;
		
	}
	.icon-img{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: .44rem;
		box-sizing: border-box;
		padding: .1rem;

	}
	.icon-img-content{
		display: block;
		height: 100%;
		margin:0 auto;
	}
	.title{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: .44rem;
        line-height: .44rem;
        text-align: center;
        color: #333;
        overflow:hidden;
       	white-space: nowrap;
       	text-overflow: ellipsis;
	}
</style>